<!-- 学习目标
如何向网站中添加Flash影片
如何向网站中添加视频和音频
HTML5中的<video></video>元素和<audio></audio>元素 -->

<!-- Flash工作原理： 首先使用Adobe公司的Flash开发环境创建Flash影片，其次对影片格式进行编码，将.fla格式的文件转换为
.swf格式在转换过程中通常会创建html的代码，可以使其嵌入进也页面(不过现在采取的都是JavaScript代码了)。最后需要浏览器
安装相关插件。 -->

<!-- 目前现状：由于js第三方库能更轻松创建动画，苹果不支持flash，flash不符合无障碍要求，
    Html5中的video和audio标签能替代播放器插件功能。 因此 flash越来越少了 -->


<!-- 提供视频的方式有两种：1、使用视频托管服务 2、自主提供：使用flash视频和HTML5中的<video>元素 -->
<!-- 添加Flash影片 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>添加flash</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
    // 调用Google服务器上的SWFObject脚本，方便后面插入播放器
    </script>
    <script type="text/javascript">
        var flashvars={}; //不同的播放器所需的信息不同
        var params={movie:"../video/puppy.flv"}; //指明影片文件的位置
        swfobject.embedSWF("flash/splayer.swf","snow","400","300","8.0.0");//指明swf播放器的位置
    </script>
</head>
<body>
    <div id="snow"><p>an video of a puppy playing in the snow </p></div>
</body>
</html>


<!-- 使用H5原生 添加视频 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>H5的video元素</title>
</head>
<body>
    <video src="video/puppy.mp4" poster="images/puppy.jpg" width="400"
     height="300" preload="none" controls loop autoplay></video>
    <!-- src：文件路径 poster在视频加载时或播放前，指定显示一个图像 -->
    <!-- preload 告诉浏览器在页面加载时需要做什么 可以选用以下3个值:
        none表示用户在按下播放按钮之前，浏览器不必加载视频 
        auto表示浏览器应该在页面加载时载入视频
        metadata该值表示浏览器只需收集少量视频信息,比如大小、首帧图像等信息
    -->

    <!-- controls、autoplay、loop特性就像on/off开关，指定就代表打开。controls:浏览器需要提供默认控件
        autoplay：视频文件自动播放 loop视频结束后重新播放 -->     
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>H5原生添加多个视频源</title>
</head>
<body>
    <video poster="images/puppy.jpg" width="400"height="300" preload="none" controls loop autoplay>
        <source src="video/puppy.mp4;" type='video/mp4;codecs="avcl.42E01E,mp4a 40.2"'/>
    </video>
    <!-- src 指定视频路径 type需要使用该特性来告诉浏览器视频的格式，不然它会先加载一些视频，看看是否可以播放该文件 -->
    <!-- codecs 指定视频进行编码的编解码器 -->
</body>
</html>

<!-- 通常需要将上述两种方式,即flash播放和video原生的方式结合起来,以方便老版浏览器用户使用 -->

<!-- 向网页中添加音频 也可以使用 三种方式 1使用托管服务 2使用flash播放 3使用html5的控件<audio> -->
添加Flash MP3播放器 使用方式和之前添加flash一致,只不过是改变一些参数

向网页中添加HTML5音频
<!-- 多个音频源的添加方式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>添加多个音频源</title>
</head>
<body>
    <audio controls autoplay> 
        <source src="audio/a.ogg" />
        <source src="audio/b.ogg" />
        <p>This is a audio</p>
    </audio>
</body>
</html>